<div class="row-fluid">
    <div class="span4">
        <form class="input-append">
            <h6>Add Facets</h6>
            <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newfield'>
            <button class="btn" ng-click="add_facet_field(newfield);newfield=''"><i class="icon-plus"></i>
            </button>
        </form>
    </div>
    <div class="span8">
        <h6>Facets
            <small>Click to remove</small>
        </h6>
        <span style="margin-left:3px" ng-click="remove_facet_field(field)" ng-repeat="field in $parent.panel.fields" class="label pointer remove">{{field}}</span>
    </div>
</div>

<h5>Options</h5>
<div class="row-fluid">
    <!--     <div class="span1">
        <h6>Header</h6>
        <input type="checkbox" ng-model="panel.header" ng-checked="panel.header">
    </div> -->
    <div class="span1">
        <h6>Sorting</h6>
        <input type="checkbox" ng-model="panel.sortable" ng-checked="panel.sortable">
    </div>
    <div class="span3" style="white-space:nowrap" ng-show='panel.sortable'>
        <h6>Sort</h6>
        <input ng-show="all_fields.length<=0 || !all_fields" style="width:85%" ng-model="panel.sort[0]" ng-change="set_refresh(true)" bs-typeahead="fields.list" type="text"></input>
        <select ng-show="all_fields.length>0" style="width:85%" ng-model="panel.sort[0]" ng-change="set_refresh(true)" ng-options="f for f in all_fields"></select>
        <i ng-click="set_sort(panel.sort[0])" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc' || panel.sort.length < 2,'icon-chevron-down': panel.sort[1] == 'desc'}"></i>
    </div>
    <div class="span2">
        <h6>Font Size</h6>
        <select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
        </span>
    </div>
    <div class="span2">
        <h6>Trim Factor
            <tip>Trim fields to this long divided by # of rows</tip>
        </h6>
        <input type="number" class="input-small" ng-model="panel.trimFactor">
    </div>
</div>
<div class="row-fluid">
    <div class="span2">
        <h6>Title Field
            <tip>The field that will be shown as title field for document</tip>
        </h6>
        <input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.header_field">
    </div>
    <div class="span2">
        <h6>Body Field
            <tip>The field that will be shown as body field for document</tip>
        </h6>
        <input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.body_field">
    </div>

    <div class="span2">
        <h6> URL field
            <tip>URL field that will be linked to title field</tip>
        </h6>
        <input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.url_field">
    </div>

    <div class="span2">
        <h6>Facet Limit
            <tip>Number of values per field that will be facted</tip>
        </h6>
        <input bs-typeahead="fields.list" type="number" class="input-small" ng-model="panel.facet_limit">
    </div>
</div>
